<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>医生列表</title>
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>查询条件</legend>
</fieldset>
<blockquote class="layui-elem-quote">
  <form class="layui-form" method="post" id="searchFrm">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">姓名:</label>
        <div class="layui-input-inline">
          <input type="text" name="doctorName"  autocomplete="off" class="layui-input" style="width:200px" >
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">类型:</label>
        <div class="layui-input-inline">
          <input type="radio" name="dstate" value="1" title="住院部">
          <input type="radio" name="dstate" value="0" title="门诊部">
        </div>
      </div>
      <div class="layui-inline" style="position: absolute;left: 650px;top:81px;">
        <div class="layui-input-inline">
          <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
        </div>
      </div>
    </div>
  </form>
</blockquote>
<!--搜索结束-->
<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
  <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">姓名:</label>
        <div class="layui-input-inline">
          <input type="hidden" name="doctorId">
          <input type="text" name="doctorName" lay-verify="required"   placeholder="请输入姓名" autocomplete="off"
                 class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">科室:</label>
        <div class="layui-input-inline">
          <select name="departmentId" id="departmentId" lay-verify="required" lay-filter="xmFilter">
            <option value=""></option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">挂号类型:</label>
        <div class="layui-input-inline">
          <select name="registeredId" id="registeredId" lay-verify="required" lay-filter="xmFilter">
            <option value=""></option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">类型:</label>
        <div class="layui-input-inline">
          <input type="radio" name="dstate" value="1" checked="checked" title="住院部">
          <input type="radio" name="dstate" value="0" title="门诊部">
        </div>
      </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
      <div class="layui-input-block" style=" margin-left:0px">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
        <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
      </div>
    </div>
  </form>

</div>
<!-- 添加和修改的弹出层结束 -->


<!-- 搜索条件结束 -->
<!-- 数据表格开始 -->
<div  style="display: none;" id="doctorToolBar">
  <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
</div>
<table class="layui-hide" id="doctorTable" lay-filter="doctorTable"></table>

<div  id="doctor" style="display: none;">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
<!-- 数据表格结束 -->
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script type="text/javascript" th:inline="none">
  var tableIns;
  layui.extend({
    dtree:'../../js/layui_ext/dist/dtree'
  }).use([ 'jquery', 'layer', 'form', 'table'  ], function() {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    //渲染数据表格
    tableIns=table.render({
      elem: '#doctorTable'   //渲染的目标对象
      ,url:'/web/doctor/doctorList' //数据接口
      ,title: '用户数据表'//数据导出来的标题
      ,toolbar:"#doctorToolBar"   //表格的工具条
      ,height:'full-200'
      ,page: 1  //是否启用分页, limits: [10, 20, 30]
      ,limits: [7, 20, 30]
      ,limit: 7//默认采用3
      ,cols: [[   //列表数据
        {field:'doctorId', title:'ID',align:'center',width:'10%',sort: true}
        ,{field:'doctorName', title:'姓名',align:'center',width:"15%"}
        ,{field:'department', title:'科室',align:'center',width:"20%"}
        ,{field:'type', title:'挂号类型',align:'center',width:"25%"}
        ,{field:'dstate', title:'类型',align:'center',width:"10%",templet:function(d){
            return d.dstate=='1'?'<font color=blue>住院部</font>':'<font color=red>门诊部</font>';
          }}
        ,{fixed: 'right', title:'操作', toolbar: '#doctor',align:'center',width:'20%'}
      ]]
    })
    //模糊查询
    $("#doSearch").click(function(){
      var params=$("#searchFrm").serialize();
      tableIns.reload({
        url:"/web/doctor/doctorList?"+params
      })
    });

    //监听头部工具栏事件
    table.on("toolbar(doctorTable)",function(obj){
      switch(obj.event){
        case 'add':
          openAddDoctor();
          break;
      };
    })
    //监听行工具事件
    table.on('tool(doctorTable)', function(obj){
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      if(layEvent === 'del'){ //删除
        layer.confirm('真的删除【'+data.doctorName+'】这个医生吗', function(index){
          //向服务端发送删除指令
          $.post("/web/doctor/deleteDoctor",{doctorId:data.doctorId},function(res){
            layer.msg(res);
            //刷新数据 表格
            tableIns.reload();
          })
        });
      } else if(layEvent === 'edit'){ //编辑
        openUpdateDoctor(data);
      }
    });

    var url;
    var mainIndex;
    //打开添加页面
    function openAddDoctor(){
      mainIndex=layer.open({
        type:1,
        title:'添加医生',
        content:$("#saveOrUpdateDiv"),
        area:['420px','400px'],
        success:function(index){
          //清空表单数据
          $("#dataFrm")[0].reset();
          url="/web/doctor/addDoctor";
        }
      });
    }
    //打开修改页面
    function openUpdateDoctor(data){
      mainIndex=layer.open({
        type:1,
        title:'修改医生',
        content:$("#saveOrUpdateDiv"),
        area:['420px','400px'],
        success:function(index){
          form.val("dataFrm",data);
          url="/web/doctor/editDoctor";
        }
      });
    }

    //初始化添加or修改到下拉框中的值
    $.ajax({
      url: '/web/doctor/findAllDepartments',
      dataType: 'json',
      type: 'post',
      success: function (data) {
        $.each(data, function (index, item) {
          $('#departmentId').append(new Option(item.department, item.departmentId));// 下拉菜单里添加元素
        });
        layui.form.render("select");//重新渲染 固定写法
      }
    })
    $.ajax({
      url: '/web/doctor/findAllRegisteredtype',
      dataType: 'json',
      type: 'post',
      success: function (data) {
        $.each(data, function (index, item) {
          $('#registeredId').append(new Option(item.type, item.registeredId));// 下拉菜单里添加元素
        });
        layui.form.render("select");//重新渲染 固定写法
      }
    })

    //保存
    form.on("submit(doSubmit)",function(obj){
      //序列化表单数据
      var params=$("#dataFrm").serialize();
      $.post(url,params,function(obj){
        layer.msg(obj);
        //关闭弹出层
        layer.close(mainIndex)
        //刷新数据 表格
        tableIns.reload();
      })
    });




  });
</script>
</body>
</html>